<template>
	<view class="login-page" :class="{'orange' : pageTheme == 'orange'}">
		<!-- <view :style="{marginTop: $common.getNavBarHeight()+'px'}"></view> -->
		<view v-if="isWeixin" class="hader" :style="{paddingTop:statusBarHeight+'px'}">
			<view>
				<view></view>
				<view>车主申请</view>
				<view></view>
			</view>
		</view>
		<image
			:src="isHuarui1?'../static/cCar.jpg':'../static/Acar.png'"
			class="top-bg">
		</image>
		<!-- <image src="https://qiche.zjysdb.com/static/img/nav-logo.c364ebe1.png" class="logo" mode="widthFix"></image> -->

		<view class="main-content">
			<view class="news-box">
				<view class="flex-aj-center top">
					<image src="@/static/Aleft.png" mode=""></image>
					<view class="">以下情况请勿申请</view>
					<image src="@/static/Aright.png" mode=""></image>
				</view>
				<view class="desc">
					黑户、按揭车、面包车、货车、营运车辆、非本人车 <text>等情况，不支持办理。</text>
				</view>
			</view>
			<view class="form-control">
				<view class="f-item">
					<view class="f-label">真实姓名</view>
					<input type="text" class="f-set" v-model="formItem.name" clearable height="92"
						placeholder="请输入您的真实姓名"></input>
				</view>
				<view class="f-item">
					<view class="f-label">手机号码</view>
					<input type="number" class="f-set" placeholder-style="color:#999999" v-model="formItem.phone" maxlength="11" clearable height="92"
						placeholder="请输入您的联系电话"></input>
					<view class="get-code" :class="codeText=='获取验证码' || codeText=='重新获取'?'color-297EFF':'color-999'"
						@click="getPhoneCode">{{codeText}}</view>
				</view>

				<view class="f-item">
					<view class="f-label">短信验证码</view>
					<input type="text" class="f-set" placeholder-style="color:#999999" v-model="formItem.vcode" maxlength="4" clearable height="92"
						placeholder="请输入您收到的短信验证码"></input>
				</view>

				<view class="f-item" @click="openArea">
					<view class="f-label">所在地区</view>
					<view type="text" placeholder='请输入地区' class="f-set"
						:class="{'uniActive': formItem.provincialCityDistrict == ''}">
						{{ formItem.provincialCityDistrict  || '请选择您所在的省/市/区'}}
					</view>
					<image src="/static/login/arrow.png" class="get-code arrow"></image>
				</view>
				<view class="f-item" v-if="!isHuarui && !isHuarui1" >
					<view class="f-label">车辆状态</view>
					<view class="radio_box">
						<view :class="formItem.carStatus == item.value ? 'radio_item' : 'radio_item2'" v-for="(item,index) in [
							{value:1,label:'已抵押'},
							{value:2,label:'未抵押'}
							]" :key="index" @click="setRadio(item.value)">
							{{item.label}}
						</view>
					</view>
				</view>
				<view class="f-item" v-if="isHuarui" >
					<view class="radio_box bold">
						按揭车、营运车辆，请勿申请  
					</view>
				</view>
				<!-- <view class="f-item">
					<view class="f-label">车辆品牌</view>
					<input type="text" class="f-set" placeholder-style="color:#999999" v-model="formItem.carDiy" maxlength="6" clearable height="92"
						placeholder="请输入您的车辆品牌"></input>

				</view> -->
				<view class="f-item" >
					<view class="f-label">车牌号码</view>
					<input type="text" class="f-set" disabled v-model="formItem.carNumber" @tap="plateShow = true"
						maxlength="7" clearable height="92" placeholder-style="color:#999999" :placeholder="isHuarui1?'请输入您的车牌号码(必填)':'请输入您的车牌号码'" />
					<plateInput v-if="plateShow" :plate="formItem.carNumber" @export="setPlate"
						@close="plateShow = false" />
				</view>
				<view class="agreement">
					<u-checkbox v-model="radioValue" shape="circle"
						:active-color="pageTheme == 'orange' ? '#FF9147' : '#3385FF'">
						<view class="flex-align-center font-s-12 color-999" style="white-space: nowrap;" >本人已阅读并同意
						<navigator v-if="isHuarui || isHuarui1" url="/pages/empower?type=11" class="col">《个人信息授权协议》</navigator>
						<navigator v-else url="/pages/empower?type=1" class="col">《个人信息授权协议》</navigator>
							<!-- <text v-if="isHuarui">与</text>	 -->
						<navigator v-if="isHuarui || isHuarui1" url="/pages/empower?type=9" class="col">《用户授权协议》</navigator>
						</view>
					</u-checkbox>
				</view>
				<view class="post-btn" @click="doLoginMobile">确认提交</view>
			</view>
			<view class="warn-section">
				<view class="warn-section">
					<view class="copy-right" v-if="isHuarui || isHuarui1" >
						<view class="p">温馨提醒：</view>
						<view class="p">·贷款有风险，借款需谨慎</view>
						<view class="p">·请根据个人能力合理贷款，理性消费。避免逾期</view>
						<view class="p">·贷款额度，放款时间请以实际审批结果为准</view>
						<view class="p" v-if="isHuarui" >·综合年化利率 3.6%-24%</view>
						<view class="p" v-else >·综合年化利率 6%-24%</view>
						<view class="p">·资金来源:上海华瑞银行股份有限公司</view>
					</view>
          
          <view class="copy-right" v-else-if="isSoul">
            <view class="p">温馨提醒：</view>
            <view class="p">·贷款有风险，借款需谨慎</view>
            <view class="p">·请根据个人能力合理贷款，理性消费。避免逾期</view>
            <view class="p">·贷款额度，放款时间请以实际审批结果为准</view>
            <view class="p">·综合年化利率 6%-24%</view>
          </view>
          
					<view class="copy-right" v-else >
						<view class="p">温馨提醒：</view>
						<view class="p">·贷款有风险，借款需谨慎，请根据个人能力合理贷款</view>
						<view class="p">·贷款额度、放款时间等以实际审批为准</view>
					</view>
				</view>
			</view>
		</view>


		<view class="pop-section" v-if="showPop">
			<view class="pop-box">
				<image src="../static/delete.png" class="close" @click="showPop = false"></image>
				<image src="../static/success.png" class="success-pic"></image>
				<view class="title">提交成功</view>
				<view class="sub">客服人员在24小时内致电与您联系</view>
				<view class="getIt" @click="showPop = false">我知道啦</view>
			</view>
		</view>
		<u-verification-code :seconds="60" ref="uCode" @change="codeChange" change-text="x秒后重新获取"
			unique-key="login"></u-verification-code>

		<u-picker round="10" v-model="showArea" title="选择地址" ref="uPicker" @confirm="getAddress"
			@cancel="showArea=false" closeOnClickOverlay @close="showArea=false" mode="region"
			:params="{province: true,city: true,area: true}"></u-picker>
	</view>
</template>

<script>
	import plateInput from '@/components/uni-plate-input/uni-plate-input.vue';
	export default {
		components: {
			plateInput
		},
		data() {
			return {
				carNumber:'',
				plateShow1:false,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 10,
				pageTheme: 'orange', // orange  blue
				scrollTop: 0,
				showPop: false,
				showArea: false,
				radioValue: false,
				plateShow: false,
				plateNo: '',
				formItem: {
					name: '',
					phone: '',
					channelId: '',
					vcode: '',
					provincialCityDistrict: '',
					carDiy: '',
					carStatus: ''
				},
				isHuarui:false,
				isHuarui1:false,
        isSoul:false,
				updateForm: {},
				codeText: '获取验证码',
				isWeixin: false,
				uiType: null,
				clickId:'',
				soulCallback:""
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad(options) {
			if (uni.getSystemInfoSync().uniPlatform === 'mp-weixin') {
				this.isWeixin = true;
			} else {
				this.isWeixin = false;
			};
			this.formItem.channelId = options.id || 100023
			if(options.id == 100166){
				this.isHuarui = true
			}else if(options.id == 100168){
				this.isHuarui1 = true
			}else if(options.id == 100159){
        this.isSoul=true
      } else{
				this.isHuarui = false
				this.isHuarui1 = false
        this.isSoul=false
      }
			
			function getParamValue(param) {
				// 获取搜索参数
				let searchParams = new URLSearchParams(window.location.search);
				let paramValue = searchParams.get(param);
			
				// 如果在搜索参数中找不到，再从哈希参数中找
				if (!paramValue) {
					let hashIndex = window.location.hash.indexOf('?');
					if (hashIndex !== -1) {
						let hashParams = new URLSearchParams(window.location.hash.substring(hashIndex + 1));
						paramValue = hashParams.get(param);
					}
				}
				return paramValue;
			}
			if(getParamValue('qz_gdt')){
				this.clickId = getParamValue('qz_gdt');
			}
			if(getParamValue('clickid')){
				this.formItem.clickid = getParamValue('clickid')
			}
			
			// soul 平台
			this.soulCallback=options.callback
			// this.soulCallback=getParamValue("callback")
			if(this.soulCallback){
				console.log(`soulCallback:${this.soulCallback}`)
			}
			
			this.formItem.qdUrl = window.location.href
			this.getChannel()

			this.$request({
				url: 'ChannelController/tjUV',
				method: 'get',
				data: {
					channelId: this.formItem.channelId
				}
			}).then(res => {

			})
		},
		methods: {
			getQueryVariable(variable){
			       let query = window.location.search.substring(1);
			       let vars = query.split("&");
			       for (let i=0;i<vars.length;i++) {
			               let pair = vars[i].split("=");
			               if(pair[0] == variable){return pair[1];}
			       }
			       return(false);
			},
			setRadio(value) {
				this.formItem.carStatus = value;
			},
			getChannel() {
				this.$request({
					url: 'ChannelController/appGetUiType',
					method: 'get',
					data: {
						channelId: this.formItem.channelId
					}
				}).then(res => {
					if (res.code == 200) {
						this.pageTheme = 'blue'
						// console.log(res.data, 'res.data-------》')

						// 如果是抖音小程序直接进入 redLogin 页面
						if (uni.getSystemInfoSync().uniPlatform === 'mp-toutiao') {
							return uni.redirectTo({
								url: `/pages/redLogin?id=${this.formItem.channelId}`
							})
						}
						//<el-option label="融悦车抵" :value="1" />
						//   <el-option label="易顺车抵" :value="3" />
						//   <el-option label="杭停定制" :value="2" />
						//  <el-option label="信也定制" :value="4" /> 
						//  <el-option label="车辆线索" :value="5" /> 
						// switch (res.data) { // 根据请求切换主题
						// 	case 1:
						// 	case 3:
						// 	case 4:
						// 		this.pageTheme = 'blue'
						// 		break;
						// 	case 2:
						// 		this.pageTheme = 'orange'
						// 		break;
						// 	case 5:
						// 		uni.redirectTo({
						// 			url: `/pages/redLogin?id=${this.formItem.channelId}`
						// 		})
						// 		break;
						// 	case 6:
						// 		// uni.redirectTo({
						// 		// 	url: `/pages/360Login?id=${this.formItem.channelId}`
						// 		// })
						// 		break;

						// };
						this.uiType = res.data;
						console.log(this.uiType,'this.uiType============?>')
					}
				})
			},
			openArea() {
				this.showArea = true
				//this.$refs.dialog.show = true
			},
			setPlate(plate) {
				if (plate.length >= 7) this.formItem.carNumber = plate;
				this.plateShow = false;
			},
			setPlate1(plate) {
				if (plate.length >= 7) this.carNumber = plate;
				this.plateShow1 = false;
			},
			getAddress(e) {
				console.log('选择的地址是', e);
				this.formItem.provincialCityDistrict = e.province.label + ',' + e.city.label + ',' + e.area.label
				//this.location = e
			},
			getPhoneCode() {
				if (!this.formItem.phone) {
					uni.showToast({
						title: '请填写账号',
						icon: 'none'
					})
					return false
				}
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						mask: true
					})
					this.$request({
						url: '/ClientUserController/sendSMSVcode',
						method: 'get',
						data: this.formItem
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '验证码已发送',
								icon: 'none'
							})
							this.$refs.uCode.start();
						}
					})
				}
			},
			doLoginMobile() {
				let that = this;
				if (!this.radioValue) {
					uni.showToast({
						title: '请阅读并且勾选相关协议',
						icon: 'none'
					})
					return false
				}
				if (!this.isHuarui && !this.isHuarui1 && !this.formItem.carStatus) {
					uni.showToast({
						title: '请选择车辆状态',
						icon: 'none'
					})
					return false
				}
				if (!this.formItem.phone) {
					uni.showToast({
						title: '请填写手机号',
						icon: 'none'
					})
					return false
				}

				if (!this.formItem.vcode) {
					uni.showToast({
						title: '请填写验证码',
						icon: 'none'
					})
					return false
				}
				if ( (this.isHuarui || this.isHuarui1)  && !this.formItem.carNumber) {
					uni.showToast({
						title: '请填写车牌号码',
						icon: 'none'
					})
					return false
				}
				// if (!this.formItem.carDiy) {
				// 	uni.showToast({
				// 		title: '请填写车俩品牌',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
				if (!this.formItem.provincialCityDistrict) {
					uni.showToast({
						title: '请选择所在地区',
						icon: 'none'
					})
					return false
				}
				
				let nowTime = parseInt(new Date().getTime()/1000)
				let data = {
					"actions": [{
						"outer_action_id": that.formItem.phone, 
						"action_time": nowTime,
						"url": "qiche.zjysdb.com", 
						"action_type": "RESERVATION",
						"trace": {
							"click_id": that.clickId
							// "click_id": 't662gzqhaaaldhzcunzq'
						},
					}],
				}
				
				// console.log(this.formItem, 'this.formItem')
				// return
				this.$request({
					url: '/ClientUserController/verifyVCode',
					method: 'get',
					data: this.formItem
				}).then(res => {
					console.log(res, '-------')
					if (res.code == 200) {
						if(that.clickId){
							that.$request({
								url: 'txApisendTrackToTx?channelId='+that.formItem.channelId,
								method: 'POST',
								data: JSON.stringify(data)
							}).then(res => {
								
							})
						}
						uni.setStorageSync('userObj', JSON.stringify(that.formItem))
						uni.showToast({
							title:'提交成功'
						})
						that.showPop = true
					}
				})
				
				//soul转化
				if(this.soulCallback){
					console.log("soul 转化映射");
					const evntTs=new Date().getTime()
					const url=this.soulCallback.replace("__EVENTTYPE__","form").replace("__EVENTTS__",evntTs)
					uni.request({
						url: url,
						method: "GET",
						complete:(res)=>{
							if (res.statusCode === 200) {
								if(res.data.code==0){
									console.log("soul 映射关系建立成功")
								}
							}
						}
					})
				}
			},
			codeChange(text) {
				this.codeText = text;
			}
		},
		onPageScroll({
			scrollTop
		}) {
			if (scrollTop > 20) {

			} else {

			}
		}
	}
</script>

<style>
	page{
		background-clor:#F5F7FA;
	}
</style>

<style lang="scss" scoped>
	.logo{
		position: fixed;
		top: 24rpx;
		left: 24rpx;
		width: 260rpx;
	}
	
	.radio_box {
		display: flex;
		align-items: center;
		
		&.bold{
			color: #FF3729;
			font-size: 48rpx;
			font-weight: bold;
		}

		.radio_item2,
		.radio_item {
			width: 316rpx;
			height: 76rpx;
			background: #F5F7FA;
			border-radius: 8rpx;
			font-family: PingFangSC;
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
			text-align:center;
			line-height:76rpx;
			margin-right:22rpx;
			margin-top:24rpx;
		}

		.radio_item {
			background: rgba(51,133,255,0.08);
			border: 2rpx solid #3385FF;
			color:#3385FF;
		}

		.radio_item2_orange,
		.radio_item_orange {
			width: 90px;
			line-height: 38px;
			border-radius: 19px;
			font-weight: 400;
			font-size: 14px;
			text-align: center;
			margin-right: 12rpx;
			margin-top: 12rpx;
			color: #fff;
			background-color: #FF9147;
		}

		.radio_item2_orange {
			background: #F5F7FA;
			color: #999999;
		}
	}

	.hader2,
	.hader {
		position: sticky;
		left: 0;
		top: 0;
		z-index: 100;
		display: flex;
		justify-content: center;
		// align-items: center;
		border-bottom: 1rpx solid #F5F5F5;
		width: 100%;
		height: 176rpx;
		background-color: #fff;
		font-size: 36rpx;
		font-weight: 500;
	}

	.hader2 {
		height: 68px;
		align-items: flex-end;
		padding-bottom: 20px;
	}

	.login-page {
		background-color: #F5F7FA;

		// 换个主题的颜色
		&.orange {
			.color-297EFF {
				color: #FF9147 !important;
			}

			.agreement .col {
				color: #FF9147 !important;
			}

			.post-btn {
				background-color: #FF9147 !important;
			}

			.note-content {
				background-color: #FF9147 !important;
			}

			.warn-section {
				margin-top: 100rpx !important;

				.warn-pic {
					width: 56rpx !important;
					height: 56rpx !important;
				}

				.main {
					color: #335E8F !important;
				}

				.list .item {
					color: #CC6018 !important;
				}

				.copy-right {
					padding: 0 24rpx;
					color: #335E8F !important;
				}
			}
		}
		
		.warn-section {
			margin-top: 50rpx !important;
		
			.warn-pic {
				width: 56rpx !important;
				height: 56rpx !important;
			}
		
			.main {
				color: #335E8F !important;
			}
		
			.list .item {
				color: #CC6018 !important;
			}
		
			.copy-right {
				color: #335E8F !important;
				.p {
					line-height: 44rpx;
				}
			}
		}

		.top-bg {
			width: 100%;
			height: 720rpx;

			&.orange {
				height: 642rpx;
			}
		}

		.main-content {
			position: relative;
			top: -48rpx;
			left: 0;
			// width: 100%;
			padding: 24rpx;
			// z-index: 2;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			margin:24rpx 24rpx 0;
		}

		.news-box {
			padding: 0 24rpx;
			
		
			.top {
				margin-bottom: 24rpx;
		
				image {
					width: 136rpx;
					height: 8rpx;
				}
		
				view {
					font-family: PingFangSC;
					font-weight: 500;
					font-size: 32rpx;
					color: #292929;
					line-height: 32rpx;
					margin: 0 8rpx;
				}
			}
		
			.desc {
				width: 654rpx;
				height: 80rpx;
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FF3729;
				line-height: 40rpx;
				text-align: center;
				font-style: normal;
		
				text {
					color: #666666;
				}
			}
		}

		.form-control {
			background-color: #fff;

			.f-item {
				position: relative;
				margin-top: 24rpx;
				width: 100%;

				&~.f-item {
					margin-top: 48rpx;
				}

				.f-label {
					font-size: 28rpx;
					font-weight: 400;
					color: #292929;
					line-height: 28rpx;
					font-family: PingFangSC;
				}

				.f-set {
					margin-top: 24rpx;
					padding: 0 24rpx !important;
					height: 92rpx;
					line-height: 92rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 2rpx solid #F0F2F5;
					font-size: 28rpx;
					font-weight: 400;
					width: 100%;

					&.uniActive {
						color: #999999;
					}
				}

				.get-code {
					position: absolute;
					right: 24rpx;
					bottom: 34rpx;
					z-index: 10;
					padding-left: 24rpx;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 28rpx;

					&.color-297EFF {
						color: #297EFF;
					}

					&.arrow {
						padding: 0;
						width: 28rpx;
						height: 28rpx;
					}
				}
			}

			.agreement {
				margin-top: 32rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999999;
				line-height: 24rpx;

				.col {
					display: inline;
					color: #297EFF;
				}
			}

			.post-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 52rpx;
				height: 96rpx;
				background: #3385FF;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

		.note-content {
			background: #28518F;
			padding: 48rpx 24rpx;

			.tab-section {
				width: 100%;
				height: 276rpx;
				background: rgba(255, 255, 255, 0.24);
				border-radius: 32rpx;

				&~.tab-section {
					margin-top: 72rpx;
				}

				.tn {
					position: relative;
					top: -24rpx;
					left: 50%;
					transform: translateX(-50%);
					z-index: 2;
					margin: 0 auto;
					width: 590rpx;
					height: 88rpx;
				}

				.list {
					margin-top: 24rpx;
					display: flex;
					justify-content: space-around;

					.item {
						width: 118rpx;
						text-align: center;

						.pic {
							margin: 0 auto;
							width: 88rpx;
							height: 88rpx;
						}

						.name {
							display: block;
							margin-top: 16rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 28rpx;
						}
					}

					.step {
						margin-top: 24rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.warn-section {
				margin-top: 52rpx;
				text-align: center;

				.warn-pic {
					display: block;
					margin: 0 auto;
					width: 58rpx;
					height: 48rpx;
				}

				.main {
					margin-top: 28rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 28rpx;
				}

				.list {
					margin-top: 24rpx;
					display: flex;
					justify-content: center;

					.item {
						padding: 0 24rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 24rpx;

						&~.item {
							border-left: 2rpx solid rgba(255, 255, 255, 0.24);
						}
					}
				}

				.copy-right {
					margin-top: 48rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;


					.p {
						line-height: 44rpx;
					}
				}
			}
		}

		.orange-info {
			padding: 128rpx 24rpx 0 24rpx;
			height: 1572rpx;
			background-image: url('https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/systeam/images/crm-h5-orange-footBg.png');
			background-size: 100% 100%;

			.t-pic {
				display: block;
				margin: 0 auto;
			}
		}

		.pop-section {
			position: fixed;
			left: 0;
			top: 0;
			z-index: 99;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.7);
			display: flex;
			align-items: center;
			justify-content: center;

			.pop-box {
				position: relative;
				width: 654rpx;
				height: 532rpx;
				background: #FFFFFF;
				border-radius: 48rpx;
				text-align: center;
				padding-top: 48rpx;

				.title {
					margin-top: 40rpx;
					font-size: 36rpx;
					font-weight: 500;
					color: #292929;
					line-height: 36rpx;
					font-weight: bold;
				}

				.sub {
					margin-top: 24rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
					line-height: 28rpx;
				}

				.getIt {
					margin: 48rpx auto 0 auto;
					width: 494rpx;
					height: 92rpx;
					line-height: 92rpx;
					background: #297EFF;
					border-radius: 46rpx;
					text-align: center;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.close {
					position: absolute;
					top: 40rpx;
					right: 40rpx;
					z-index: 2;
					width: 40rpx;
					height: 40rpx;
				}

				.success-pic {
					margin: 0 auto;
					width: 190rpx;
					height: 176rpx;
				}
			}
		}
	}
	@media only screen and (min-width: 750px) {
		.login-page {
			margin: auto;
			width: 1200px;
	
			.top-bg {
				width: 100%;
				height:88vh;
			}
		}
	}
</style>